<template>
	<view class="bg-white" style="width: 100vw; height: 100vh;">
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="content">
				<text style="font-size: 32rpx; color: #333333; font-weight: bold;">设置</text>
			</block>
		</cu-custom>
		<view class="flex justify-between" style="padding: 32rpx 32rpx;">
			<view class="field-name" style="color: #333333; font-size: 32rpx;">推送通知</view>
			<switch @change="changePushNotification" :class="pushNotification?'checked':''" :checked="pushNotification?true:false"></switch>
		</view>
		<view class="flex justify-between" style="padding: 32rpx 32rpx;">
			<view class="field-name" style="color: #333333; font-size: 32rpx; font-weight: bold;">互动</view>
		</view>
		<view class="flex justify-between" style="padding: 32rpx 32rpx;">
			<view class="field-name" style="color: #333333; font-size: 32rpx;">收到点赞</view>
			<switch @change="changeReceiveLike" :class="receiveLike?'checked':''" :checked="receiveLike?true:false" :disabled="isDisabled"></switch>
		</view>
		<view class="flex justify-between" style="padding: 32rpx 32rpx;">
			<view class="field-name" style="color: #333333; font-size: 32rpx;">收到评论或回复</view>
			<switch @change="changeReceiveComment" :class="receiveComment?'checked':''" :checked="receiveComment?true:false" :disabled="isDisabled"></switch>
		</view>
		<view class="flex justify-between" style="padding: 32rpx 32rpx;">
			<view class="field-name" style="color: #333333; font-size: 32rpx;">获得新粉丝</view>
			<switch @change="changeReceiveFan" :class="receiveFan?'checked':''" :checked="receiveFan?true:false" :disabled="isDisabled"></switch>
		</view>
		<view class="flex justify-between" style="padding: 32rpx 32rpx;">
			<view class="field-name" style="color: #333333; font-size: 32rpx; font-weight: bold;">预约和订阅</view>
		</view>
		<view class="flex justify-between" style="padding: 32rpx 32rpx;">
			<view class="field-name" style="color: #333333; font-size: 32rpx;">预约提醒</view>
			<switch @change="changeAppointNotification" :class="appointNotification?'checked':''" :checked="appointNotification?true:false" :disabled="isDisabled"></switch>
		</view>
		<view class="flex justify-between" style="padding: 32rpx 32rpx;">
			<view class="field-name" style="color: #333333; font-size: 32rpx;">订阅提醒</view>
			<switch @change="changeSubscribeNotification" :class="subscribeNotification?'checked':''" :checked="subscribeNotification?true:false" :disabled="isDisabled"></switch>
		</view>
		<view class="flex justify-between" style="padding: 32rpx 32rpx;">
			<view class="field-name" style="color: #333333; font-size: 32rpx; font-weight: bold;">免打扰</view>
		</view>
		<view class="flex justify-between" style="padding: 32rpx 32rpx;">
			<view class="field-name" style="color: #333333; font-size: 32rpx;">消息免打扰</view>
			<switch @change="changeAvoidDisturbing" :class="avoidDisturbing?'checked':''" :checked="avoidDisturbing?true:false" :disabled="isDisabled"></switch>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isDisabled: false,
				pushNotification: true,
				receiveLike: true,
				receiveComment: true,
				receiveFan: true,
				appointNotification: true,
				subscribeNotification: true,
				avoidDisturbing: true,
			}
		},
		methods: {
			changePushNotification(e) {
				this.pushNotification = e.detail.value;
				if(!this.pushNotification){
					this.receiveLike = false;
					this.receiveComment = false;
					this.receiveFan = false;
					this.appointNotification = false;
					this.subscribeNotification = false;
					this.avoidDisturbing = false;
					this.isDisabled = true;
				}else {
					this.receiveLike = true;
					this.receiveComment = true;
					this.receiveFan = true;
					this.appointNotification = true;
					this.subscribeNotification = true;
					this.avoidDisturbing = true;
					this.isDisabled = false;
				}
			},
			changeReceiveLike(e) {
				this.receiveLike = e.detail.value;
			},
			changeReceiveComment(e) {
				this.receiveComment = e.detail.value;
			},
			changeReceiveFan(e) {
				this.receiveFan = e.detail.value;
			},
			changeAppointNotification(e) {
				this.appointNotification = e.detail.value;
			},
			changeSubscribeNotification(e) {
				this.subscribeNotification = e.detail.value;
			},
			changeAvoidDisturbing(e) {
				this.avoidDisturbing = e.detail.value;
			},
		}
	}
</script>

<style>
</style>
